<template>
  <div @click="click" @mouseenter="enter" @mouseleave="leave" class="rx-popover" :style="{
    'position':type==='absoulte'?'relative':''
  }">
    <!-- 默认插槽 -->
    <slot></slot>
    <!-- 浮动内容 -->
    <Fixed v-if="type!=='absoulte'" ref="fixed" :placement="placement" @onShow="onShow" @onHide="onHide">
      <slot name="popover"></slot>
    </Fixed>
    <Abs v-if="type==='absoulte'" ref="abs" :placement="placement" @onShow="onShow" @onHide="onHide">
       <slot name="popover"></slot>
    </Abs>
  </div>
</template>
<script>
import Fixed from "./_fixed.vue";
import Abs from "./_abs.vue";

export default {
  name: "rx-popover",
  props: {
    type: {//类型，默认absoulte
      default() {
        return ['absoulte','fixed'][0];
      }
    },
    placement: {//显示的位置 默认bottom-start
      type: String,
      default(){
        var defaultValues=[];
        ['bottom','right','top','left'].forEach(function(posi){
          ['start','center','end'].forEach(function(tion){
            defaultValues.push(posi+'-'+tion)
          });
        });
        return defaultValues[0]
      }
    },
    eventType: {//触发显示浮动框的事件类型 默认click
      type: String,
      default() {
        return ["click", "mouseenter"][0];
      }
    },
  },
  methods: {
    //click
    click(ev) {
      if (this.eventType !== "click") {
        return;
      }
      this.toggle(ev);
    },
    //mouseenter
    enter(ev) {
      if (this.eventType !== "mouseenter") {
        return;
      }
      this.show(ev);
    },
    //mouseleave
    leave(ev) {
      if (this.eventType !== "mouseenter") {
        return;
      }
      this.hide(ev);
    },
    onShow (el) {
      this.$emit('onShow', el);
    },
    onHide () {
      this.$emit('onHide');
    }
  },
  components: {
    Fixed,
    Abs
  },
  mounted(){
    //对外事件 start
    var el = this.$el,
        component=this.type === "absoulte"?this.$refs.abs: this.$refs.fixed;
    /**
     * 显示浮层
     * @augments ev 事件
     */
    this.show=function(ev){
      component.show(el, ev);
    }
     /**
     * 隐藏浮层
     * @augments ev 事件
     */
    this.hide=function(ev){
      component.hide(el, ev);
    }
     /**
     * 调戏浮层
     * @augments ev 事件
     */
    this.toggle=function(ev){
      component.toggle(el, ev);
    }
    //对外事件 end
  }
};
</script>
<style>
.rx-popover {
  display: inline-block;
}
</style>

